<template>
  <view class="comment-container">
    <view class="concert-name">{{ performanceTitle }}</view>
    <view class="rateScore">
      <view class="left">
        <view class="rate-title">熊熊评分</view>
        <view class="scoreBox">
          <view class="number">{{
              performanceScore.score == 0 ? "--" : performanceScore.score
            }}
          </view>
          <view class="star"
          >
            <uni-rate
                :touchable="false"
                :value="Math.round(performanceScore.score)"
                size="13"
            />
          </view>
        </view>
      </view>
      <view class="right">
        <view class="row">
          <view class="star-rating">
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
          </view>
          <view class="processing"
          >
            <progress
                :percent="performanceScore.proportionOfScore[4]"
                stroke-width="6"
                border-radius="3"
            />
          </view>
        </view>
        <view class="row">
          <view class="star-rating">
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
          </view>
          <view class="processing"
          >
            <progress
                :percent="performanceScore.proportionOfScore[3]"
                stroke-width="6"
                border-radius="3"
            />
          </view>
        </view>
        <view class="row">
          <view class="star-rating">
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
          </view>
          <view class="processing"
          >
            <progress
                :percent="performanceScore.proportionOfScore[2]"
                stroke-width="6"
                border-radius="3"
            />
          </view>
        </view>
        <view class="row">
          <view class="star-rating">
            <img src="../../static/star.png" alt=""/>
            <img src="../../static/star.png" alt=""/>
          </view>
          <view class="processing"
          >
            <progress
                :percent="performanceScore.proportionOfScore[1]"
                stroke-width="6"
                border-radius="3"
            />
          </view>
        </view>
        <view class="row">
          <view class="star-rating">
            <img src="../../static/star.png" alt=""/>
          </view>
          <view class="processing"
          >
            <progress
                :percent="performanceScore.proportionOfScore[0]"
                stroke-width="6"
                border-radius="3"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="commentBox">
      <view class="topBox">
        <view class="title">全部短评</view>
        <view>
          <button class="CommentBtn" @click="open">去评价</button>
          <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                message="成功消息"
                title=" "
                :duration="2000"
                :before-close="true"
                @close="close"
                @confirm="confirm"
            >
              <view class="commentarea">
                <view class="star">
                  <view class="text">请评分：
                  </view
                  >
                  <uni-rate v-model="curComment.evaluationScore" @change="onChange" size="20"
                  />
                </view>
                <view class="textarea">
                  <textarea v-model="curComment.commentContent" placeholder="在这里发表你的言论把~"></textarea>
                </view>
              </view>
            </uni-popup-dialog>
          </uni-popup
          >
        </view>
      </view>
      <view class="commentList">
        <view v-for="(item,index) in commentList" :key="index" class="comment-item">
          <view class="left">
            <view
                class="avatar"
                :style="'background-image: url(' + item.avatarUrl + ')'"
            ></view>
          </view>
          <view class="right">
            <view class="userName">{{ item.nickname }}
              <uni-tag text="我" class="tag" custom-style="padding: 1px 2px;" type="warning" v-if="isMy(item)"></uni-tag>
              <uni-tag text="已买票" class="tag" custom-style="padding: 1px 2px;" type="success" v-if="item.isBuy"></uni-tag>
              <uni-tag text="未买票" class="tag" custom-style="padding: 1px 2px;" type="default " v-else></uni-tag>
            </view>
            <view class="star">
              推荐
              <uni-rate
                  :touchable="false"
                  :value="item.evaluationScore"
                  size="14"
              />
              <view class="comment-date">
                {{ format2CommentStandardDateStr(item.updateTime) }}
              </view>
            </view>
            <view class="comment">{{ item.commentContent }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {doComment, getCommentList, getPerformanceScore} from "../../api/user/comment";
import {format2CommentStandardDateStr} from "../../utils/DateUtils";

export default {
  data() {
    return {
      commentList: [],
      commentCount: 0,
      performanceScore: {},
      performanceTitle: '',
      curComment: {
        commentContent: '',
        evaluationScore: 1,
      },
    };
  },
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curParam = routes[routes.length - 1].options; //获取路由参数
    this.performanceId = curParam.performanceId;
    this.curComment.performanceId = curParam.performanceId;
    this.performanceTitle = curParam.performanceTitle;
    this.init();
  },
  methods: {
    format2CommentStandardDateStr,
    getPerformanceScore() {
      getPerformanceScore(this.performanceId).then((res) => {
        this.performanceScore = res.data;
      });
    },
    init() {
      // 查询演出评分信息
      this.getPerformanceScore();
      // 查询评论
      this.getCommentList();
    },
    getCommentList() {
      getCommentList(this.performanceId).then((res) => {
        this.commentList = res.data;
      });
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    confirm() {
      doComment(this.curComment).then(res => {
        wx.showToast({
          title: '评论成功！',
          icon: "success",
          duration: 1000,
        });
        this.curComment = {
          commentContent: '',
          evaluationScore: 1,
        };
        this.init();
      })
      this.$refs.popup.close();
    },
    isMy(item) {
      return this.$store.state.loginUserInfo.userId == item.userId;
    },
    onChange(e) {
      this.curComment.evaluationScore = e.value;
    },
  },
};
</script>

<style lang="less">
.comment-container {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 150upx);
}

.concert-name {
  width: 100%;
  height: 40px;
  background-color: #d4237a;
  color: white;
  font-size: 18px;
  line-height: 60px;
  font-weight: 600;
  padding: 15px;
}

.rateScore {
  display: flex;
  justify-content: start;
  padding: 10px 15px;
  background-color: white;
  margin-top: 10px;
  width: 100%;
  height: 65px;

  .left {
    height: 100%;
    width: 18%;
    height: 100%;
    font-size: 15px;

    .scoreBox {
      float: right;
      font-size: 30px;
      align-items: center;
      text-align: center;
    }
  }

  .right {
    height: 100%;
    width: 60%;

    .row {
      display: flex;
      width: 100%;
      height: 15px;

      .star-rating {
        display: flex;
        flex-direction: row-reverse;
        width: 65px;
        height: 12px;

        img {
          width: 12px;
          height: 100%;
        }
      }

      .processing {
        margin-top: 4px;
        width: 75%;
        height: 100%;
      }
    }
  }
}

.commentBox {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border-top: 1px solid #efefef;

  .topBox {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 20px;
      font-weight: 600;
    }

    .CommentBtn {
      background-color: rgb(248, 133, 190);
      color: white;
      font-weight: normal;
      font-size: 16px;
      padding: 0 5px;
      line-height: 25px;
      border-radius: 5px;
    }

    .commentarea {
      width: 90%;
      height: 90%;
      align-items: center;

      .star {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .text {
          font-size: 20px;
        }
      }

      .textarea {
        margin-top: 5px;
        padding: 5px;
        width: 100%;
        border: 1px solid #c4bebe;
        border-radius: 5px;
        color: #676565;
      }
    }
  }

  .commentList {
    margin-top: 10px;

    .comment-item {
      display: flex;
    }

    .left {
      width: 13%;
      padding: 2px;

      .avatar {
        // background-size: contain;
        background-color: #e486b5;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
      }
    }

    .right {
      padding: 0px 5px;
      width: 80%;
      border-bottom: 1px solid #efefef;

      .userName {
        font-size: 17px;
        line-height: 28px;

        .tag {
          margin-left: 10rpx;
        }
      }

      .star {
        display: flex;
        font-size: 12px;
        align-items: flex-start;

        .uni-rate {
          margin-left: 2px;
        }

        .comment-date {
          margin-left: 3px;
        }
      }

      .comment {
        padding: 10px 0;
        letter-spacing: 2rpx;
        font-size: 14px;
      }
    }
  }
}
</style>
